<script setup>
import { ref, onMounted, toHandlerKey } from "vue";
import * as Three from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

const canvas = ref(null);
const gltfLoader = new GLTFLoader();
const sizes = {
  width: 800,
  height: 800
};

onMounted(async () => {
  const scene = new Three.Scene();
  const gltf = await gltfLoader.loadAsync("/KT60210-1200x400.gltf");
  gltf.scene.traverse((child) => {
    if (child.material instanceof Three.MeshBasicMaterial) {
      child.material = new Three.MeshStandardMaterial({
        color: child.material.color,
        map: child.material.map,
        normalMap: child.material.normalMap,
        metalness: 0.5,
        roughness: 0.5
      });
      child.material.color.set(0xffffff); // 设置为白色
      child.material.opacity = 1.0; // 设置为完全不透明
      child.material.transparent = false; // 关闭透明
    }
    console.log(child.material); // 查看材质属性
  });
  gltf.scene.position.x += 3;
  gltf.scene.position.y += 0.15;
  gltf.scene.scale.set(0.006, 0.006, 0.006);
  scene.add(gltf.scene);
  // const floor = new Three.Mesh(
  //   new Three.PlaneBufferGeometry(10, 10),
  //   new Three.MeshStandardMaterial({
  //     color: "#777",
  //     metaness: 0.3,
  //     roughness: 0.4,
  //     // envMap: environmentTexture,
  //     envMapIntensity: 0.5,
  //   })
  // );
  // floor.receiveShadow = true;
  // floor.rotation.x = -Math.PI * 0.5;
  // scene.add(floor);

  const cubeTextureLoader = new Three.CubeTextureLoader();
  const environmentTexture = cubeTextureLoader.load([
    `/px.png`,
    `/nx.png`,
    `/py.png`,
    `/ny.png`,
    `/pz.png`,
    `/nz.png`,
  ]);
  scene.background = environmentTexture;

  const ambientLight = new Three.AmbientLight(0xffffff, 2.5);
  scene.add(ambientLight);

  const directionalLight = new Three.DirectionalLight(0xffffff, 2.5);
  directionalLight.castShadow = true;
  directionalLight.shadow.mapSize.set(1024, 1024);
  directionalLight.shadow.camera.far = 15;
  directionalLight.shadow.camera.left = -7;
  directionalLight.shadow.camera.top = 7;
  directionalLight.shadow.camera.right = 7;
  directionalLight.shadow.camera.bottom = -7;
  directionalLight.position.set(10, 10, 10);
  scene.add(directionalLight);


  const directionalLight2 = new Three.DirectionalLight(0xffffff, 1.0);
  directionalLight2.castShadow = true;
  directionalLight2.shadow.mapSize.set(1024, 1024);
  directionalLight2.shadow.camera.far = 15;
  directionalLight2.shadow.camera.left = -7;
  directionalLight2.shadow.camera.top = 7;
  directionalLight2.shadow.camera.right = 7;
  directionalLight2.shadow.camera.bottom = -7;
  directionalLight2.position.set(-5, 5, 5);
  scene.add(directionalLight2);

  const directionalLight3 = new Three.DirectionalLight(0xffffff, 1.0);
  directionalLight3.castShadow = true;
  directionalLight3.shadow.mapSize.set(1024, 1024);
  directionalLight3.shadow.camera.far = 15;
  directionalLight3.shadow.camera.left = -7;
  directionalLight3.shadow.camera.top = 7;
  directionalLight3.shadow.camera.right = 7;
  directionalLight3.shadow.camera.bottom = -7;
  directionalLight3.position.set(5, 5, -5);
  scene.add(directionalLight3);


  const pointLight1 = new Three.PointLight(0xffffff, 1.0, 100);
  pointLight1.position.set(5, 5, 5);
  scene.add(pointLight1);

  const pointLight2 = new Three.PointLight(0xffffff, 1.0, 100);
  pointLight2.position.set(-5, 5, 5);
  scene.add(pointLight2);

  const pointLight3 = new Three.PointLight(0xffffff, 1.0, 100);
  pointLight3.position.set(5, 5, -5);
  scene.add(pointLight3);

  const camera = new Three.PerspectiveCamera(
    75,
    sizes.width / sizes.height,
    0.1,
    100
  );
  camera.position.set(-3, 3, 3);
  scene.add(camera);



  const controls = new OrbitControls(camera, canvas.value);
  controls.enableDamping = true;
  const renderer = new Three.WebGLRenderer({
    canvas: canvas.value
  });
  renderer.setSize(sizes.width, sizes.height);
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = Three.PCFSoftShadowMap;

  const clock = new Three.Clock();
  let oldElapsedTime = 0;
  const tick = () => {
    const elapsedTime = clock.getElapsedTime();
    const deltaTime = elapsedTime - oldElapsedTime;
    oldElapsedTime = elapsedTime;
    controls.update();

    renderer.render(scene, camera);

    window.requestAnimationFrame(tick);
  };

  tick();

});


</script>

<template>
  <div class="container">
    <canvas ref="canvas"></canvas>
  </div>
</template>

<style scoped></style>
